<template>
    <div class="tiny-info-box">
        <img src="../assets/images/avatar.jpg"> 

        <!-- 文艺的介绍自己哈哈哈 -->
        <p class="nicky-name">Sam</p>

        <p class="introduction">Hallo,ich bin Sam.</p>

        <!-- 我的联系方式 -->
        <div class="contect">
            <span>QQ:2472076590</span>
            <span>Weibo:<a href="https://weibo.com/u/6862208924?topnav=1&wvr=6&topsug=1&is_all=1" target="_blank">Samplk</a></span>
            <span>Bilibili:<a href="https://space.bilibili.com/382609798" target="_blank">Sam__my</a></span>
        </div>
        
    </div>
</template>

<style scoped>
    .tiny-info-box{
        width: 1050px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 20px;
        font-size: 16px;
    }

    img{
        margin: 0px auto;
        margin-top: 15px;
        margin-bottom: 5px;
        width: 150px;
        height: 150px;
        border-radius: 150px;
        border:2px;
    }

    .nicky-name{
        margin: 0 auto;
        text-align: center;
        width: 200px;
    }

    .introduction{
        margin: 0 auto;
        text-align: center;
        width: 200px;
    }

    .contect{
        padding:10px;
    }

    .contect span{
        display: inline-block;
        margin-left:30px ;
        margin-right: 30px;
        font-weight: bold;
    }

    .contect span a{
        text-decoration: none;
    }



</style>

<script>
export default {
  name: "TinyInfo"
};
</script>